<template>
  <div class="todolist_wrap" @click="removeDeletePanel">
    <div class="background_image_wrap">
      <img class="background_image" src="@/assets/background.jpg" />
    </div>

    <div class="title">Todo</div>
    <div class="title_date">
      {{ `${date.getMonth() + 1}月${date.getDate()}日` }}
    </div>
    <!-- todolist未完成 -->
    <transition-group tag="div" name="list">
      <!-- 已完成按钮 -->
      <!-- <div class="button_completed"></div> -->
      <!-- 列表项 -->
      <div
        class="todolist_wrap list-item"
        v-for="(todoList_item, todoList_index) in todoList"
        :key="todoList_item.createTime.timestamp"
      >
        <!-- 已完成按钮 -->
        <!-- <div
          class="button_completed"
          v-if="
            completedIndex == todoList_index &&
            todoList.length - 1 != completedIndex
          "
        >
          已完成{{ todoList.length - 1 - completedIndex }}
        </div> -->
        <div
          class="todolist"
          :class="{
            todolist_uncompleted: !todoList_item.completed,
            todolist_completed: todoList_item.completed,
          }"
        >
          <div
            class="radio_wrap"
            :data-index="todoList_index"
            @click="todoListRadioChange"
          >
            <div
              class="radio disable"
              :class="{
                radio_on: todoList_item.completed,
                radio_off: !todoList_item.completed,
              }"
            >
              <img class="radio_img" src="../assets/complete.svg" alt="" />
            </div>
          </div>
          <div
            class="delete_panel"
            @click="deleteItem"
            v-if="deleteIndex == todoList_index"
          >
            删除
          </div>
          <div
            class="todolist_content"
            :data-index="todoList_index"
            @touchstart="touchStart"
            @touchend="touchEnd"
          >
            <div class="todolist_text disable">
              <div class="strikethrough" v-if="todoList_item.completed"></div>
              {{ todoList_item.text }}
            </div>
            <div class="todolist_props disable">
              <div class="todolist_tag">{{ todoList_item.tag }}</div>
              <!-- 截止日期 如果存在 -->
              <div class="todolist_deadline">
                {{
                  !todoList_item.deadlineDate
                    ? ""
                    : `${todoList_item.deadlineDate.getFullYear()}/${
                        todoList_item.deadlineDate.getMonth() + 1
                      }/${todoList_item.deadlineDate.getDate()} `
                }}
              </div>
              <!-- 截止时间 如果存在 -->
              <div class="todolist_deadline">
                {{
                  !todoList_item.deadlineTime
                    ? ` `
                    : `${todoList_item.deadlineTime.getHours()}:${todoList_item.deadlineTime.getMinutes()}`
                }}
              </div>
            </div>
          </div>

          <!-- 收藏标志 -->
          <div
            class="collect_wrap"
            :class="{ disable: todoList_item.completed }"
            :data-index="todoList_index"
            :name="todoList_index"
            @click="collectedChange"
          >
            <i
              class="disable fa fa-star-o"
              v-show="!todoList_item.collected"
            ></i>
            <i class="disable fa fa-star" v-show="todoList_item.collected"></i>
          </div>
        </div>
      </div>
    </transition-group>

    <div
      class="input_wrap"
      :class="{
        input_wrap_on: button_add_state,
        input_wrap_off: !button_add_state,
      }"
    >
      <!-- 取消 -->
      <div
        class="button_cancel"
        :class="{
          button_cancel_on: button_add_state,
          button_cancel_off: !button_add_state,
        }"
        @click="buttonCancelInput"
      >
        <div class="add">×</div>
      </div>
      <!-- 添加 -->
      <div class="button_add" @click.stop="buttonAddChange">
        <div
          class="add"
          :class="{
            button_add_on: !button_add_state,
            button_add_off: button_add_state,
          }"
        >
          +
        </div>
        <div class="complete">
          <img class="complete_img" src="../assets/complete.svg" alt="" />
        </div>
      </div>
      <!-- 输入框 -->
      <el-input
        class="input_text"
        v-model="inputText"
        placeholder="添加任务"
        ref="textInput"
      ></el-input>
      <div class="props_wrap">
        <el-select
          v-model="tagValues"
          filterable
          allow-create
          default-first-option
          placeholder="标签"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 日期选择 -->

        <el-date-picker
          v-model="deadlineDate"
          align="right"
          type="date"
          placeholder="截止日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <!-- 时间选择 -->
        <el-time-picker
          v-model="deadlineTime"
          :picker-options="{
            selectableRange: '00:00:00 - 23:59:59',
          }"
          placeholder="截止时间"
          v-show="deadlineDate"
        >
        </el-time-picker>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
export default {
  name: "Todolist",
  data() {
    return {
      date: new Date(),
      todoList: [],
      todoListCompleted: [],
      button_add_state: false,
      inputText: "",
      //   tag选择器
      options: [
        {
          value: "任务",
          label: "任务",
        },
        {
          value: "会议",
          label: "会议",
        },
        {
          value: "生日",
          label: "生日",
        },
      ],
      tagValues: "任务",
      //   日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "后天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 7200 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      deadlineDate: "",
      deadlineTime: "",
      Loop: 0,
      deleteIndex: undefined,
    };
  },
  methods: {
    // 选框点击
    todoListRadioChange(e) {
      let index = e.target.dataset.index;
      //console.log(e);
      this.todoList[index].completed = !this.todoList[index].completed;
      if (this.todoList[index].completed) {
        let t = this.todoList.splice(index, 1);
        this.todoList.push(...t);
      } else if (!this.todoList[index].completed) {
        let t = this.todoList.splice(index, 1);
        this.todoList.unshift(...t);
      }
    },
    // 点击收藏按钮
    collectedChange(e) {
      let index = Number(e.target.dataset.index);
      //console.log(index, this.todoList);
      this.todoList[index].collected = !this.todoList[index].collected;
      if (this.todoList[index].collected) {
        //console.log("collected");
        //   收藏，置顶
        let t = this.todoList[index];
        for (let i = index; i >= 0; i--) {
          this.todoList[i] = this.todoList[i - 1];
        }
        this.todoList[0] = t;
      } else if (!this.todoList[index].collected) {
        //   取消收藏，取消置顶
        let t = this.todoList[index];
        let tIndex = this.todoList.length - 1;
        for (let i = index; i + 1 < this.todoList.length; i++) {
          if (
            this.todoList[i + 1].collected == true &&
            this.todoList[i + 1].completed == false
          ) {
            //console.log(true);
            this.todoList[i] = this.todoList[i + 1];
          } else {
            tIndex = i;
            //console.log("替换索引", tIndex);
            break;
          }
        }
        //console.log(tIndex);
        this.todoList[tIndex] = t;
      }
    },
    // 添加按钮点击
    buttonAddChange() {
      this.button_add_state = !this.button_add_state;
      //   自动聚焦，细节啊
      this.button_add_state
        ? this.$refs.textInput.focus()
        : this.$refs.textInput.blur();
      //console.log(this.button_add_state, new Date());
      let myDate = new Date();
      let timestamp = myDate.valueOf();
      let nowTime = `${myDate.getFullYear()}/${myDate.getMonth()}/${myDate.getDate()}/${myDate.getHours()}/${myDate.getMinutes()}/${myDate.getSeconds()}/${myDate.getMilliseconds()}`;
      //console.log(nowTime);
      //   添加输入的待办任务
      if (this.button_add_state == false) {
        if (this.inputText != "") {
          this.todoList.unshift({
            text: this.inputText,
            completed: false,
            tag: this.tagValues,
            createTime: {
              timestamp: timestamp,
              // y:myDate.getFullYear(),
            },
            deadlineDate: this.deadlineDate,
            deadlineTime: this.deadlineTime,
            collected: false,
          });
        }
      }
      this.initInput();
    },
    // 取消按钮点击
    buttonCancelInput() {
      //console.log("取消");
      this.button_add_state = false;
      this.inputText = "";
      this.deadlineDate = "";
      this.deadlineTime = "";
      this.initInput();
    },
    // 初始化输入区
    initInput() {
      this.inputText = "";
      this.deadlineDate = "";
      this.deadlineTime = "";
      this.tagValues = "任务";
    },
    // 列表排序函数（关键）
    // 不关键，写完了发现用不上了
    sort() {},
    touchin(index) {
      // 长按事件，按住后等待指定事件触发
      let that = this;
      this.Loop = setTimeout(function () {
        that.Loop = 0;
        //console.log("长按触发");
      }, 500);
      return false;
    },
    // 控制删除按钮
    deletePanel(index) {
      //console.log(111);
      this.deleteIndex = index;
    },
    deleteItem() {
      this.todoList.splice(this.deleteIndex, 1);
      this.deleteIndex = undefined;
    },
    removeDeletePanel() {
      this.deleteIndex = undefined;
    },
    touchStart(e) {
      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
      this.loop = setTimeout(() => {
        //console.log("长按了", e, e.target.dataset.index);
        this.deletePanel(e.target.dataset.index);
      }, 1000);
    },

    touchEnd() {
      clearTimeout(this.loop); //清空定时器，防止重复注册定时器
    },
  },
  //   mounted() {
  //     this.Date = new Date();
  //     //console.log(this.Date);
  //   },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import url("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
$blue: rgb(22, 139, 235);
$red: rgb(255, 67, 67);
$list_size: 60px;
$button_add_size: 60px;
$input_wrap_height: 400px;
$transition_time: 0.5s;

.todolist_wrap {
  position: relative;
  border: 1px solid rgba($color: #000000, $alpha: 0);
  box-sizing: border-box;
  height: 100%;
}

.background_image_wrap {
  position: absolute;
  z-index: -2;
  opacity: 0.8;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.title {
  margin: 30px 0 10px 25px;
  font-weight: 600;
  font-size: 40px;
  color: white;
}
.title_date {
  margin: 10px 0 30px 25px;
  font-weight: 600;
  font-size: 24px;
  color: white;
}

.todolist {
  height: $list_size;
  //   background-color: white;
  margin: $list_size * 0.05 auto;
  background-color: rgb(255, 255, 255);
  border-radius: $list_size * 0.05;
  width: 95%;
  display: flex;
}

// .todolist_uncompleted {
//   background-color: rgb(255, 255, 255);
// }

.todolist_completed {
  opacity: 0.7;
}
.list-item {
  /* display: inline-block; */
  transition: all 0.5s;
}

.list-enter, .list-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-active {
  position: absolute;
  width: 100%;
  // left: 2.5%;
}

.radio_wrap {
  height: $list_size;
  width: $list_size;
  display: flex;
  //   flex-direction: column;
  justify-content: center;
  align-items: center;
}

.radio {
  border: 2px solid $blue;
  box-sizing: border-box;
  height: $list_size * 0.5;
  width: $list_size * 0.5;
  border-radius: 50%;
  text-align: center;
  transition: $transition_time;
}
.radio_off {
  background-color: white;
}

.radio_on {
  background-color: $blue;
}

.radio_img {
  height: $list_size * 0.3;
  width: $list_size * 0.3;
  margin: $list_size * 0.1 auto;
}
.todolist_content {
  width: calc(100% - 120px);
  position: relative;
}

.todolist_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  margin-top: $list_size * 0.1;
  height: $list_size * 0.4;
  line-height: $list_size * 0.4;
}

.todolist_text_completed {
  color: #777;
}
// 删除线
.strikethrough {
  width: 100%;
  height: 0;
  position: absolute;
  top: 0.3 * $list_size;
  border-bottom: 1px solid #111;
}
.todolist_props {
  color: #777;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: $list_size * 0.4;
  line-height: $list_size * 0.4;
}
.collect_wrap {
  display: inline;
  line-height: $list_size;
  text-align: center;
  width: $list_size;
  height: $list_size;
  //   background-color: aquamarine;
  color: $blue;
  font-size: $list_size * 0.5;
}
.disable {
  pointer-events: none;
}
.input_wrap {
  position: fixed;
  transition: $transition_time;
  width: 100%;
  height: $input_wrap_height;
  background-color: rgb(245, 245, 245);
}

.input_wrap_on {
  bottom: 80px;
  box-shadow: 0 0 20px 0 rgba($color: #000000, $alpha: 0.1);
}
.input_wrap_off {
  bottom: 80-$input_wrap_height;
}
.button_add {
  position: absolute;
  top: -1.5 * $button_add_size;
  right: 0.5 * $button_add_size;
  width: $button_add_size;
  height: $button_add_size;
  border-radius: 50%;
  background-color: $blue;
  transition: 1s;
  overflow: hidden;
  box-shadow: 0 10px 20px 0 rgba($color: #000000, $alpha: 0.2);
}
.button_add_on {
  height: $button_add_size;
}
.button_add_off {
  height: 0;
}
.button_add div {
  color: white;
  $button_add_size: 60px;
  width: $button_add_size;
  transition: $transition_time;
  //   height: $button_add_size;
  text-align: center;
  line-height: $button_add_size;
  font-size: $button_add_size/1.5;
  overflow: hidden;
}
.complete_img {
  //   margin: $button_add_size/2;
  width: $button_add_size/2;
  height: $button_add_size/2;
}
.button_cancel {
  position: absolute;
  top: -1.5 * $button_add_size;
  border-radius: 50%;
  background-color: $red;
  color: white;
  $button_add_size: 60px;
  width: $button_add_size;
  transition: $transition_time;
  height: $button_add_size;
  text-align: center;
  line-height: $button_add_size;
  font-size: $button_add_size/1.5;
}

.button_cancel_on {
  right: 2 * $button_add_size;
  box-shadow: 0 10px 20px 0 rgba($color: #000000, $alpha: 0.2);
}
.button_cancel_off {
  right: 0.5 * $button_add_size;
}

.input_text {
  // margin: 0 auto;
  // width: 90%;
}
.props_wrap {
  display: flex;
}

.button_completed {
  //   display: block;
  height: $list_size * 0.5;
  margin: $list_size * 0.2;
}

.delete_panel {
  background-color: #333;
  color: white;
  text-align: center;
  width: 60px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  position: absolute;
  left: calc(45%);
  // right: 0;
  top: -30px;
}
.delete_panel::after {
  content: "";
  // background-color: #333;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 5px solid #333;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  left: 25px;
}
</style>
